@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    /* Restore native webkit behavior */
    @apply leading-base;
  }

  input,
  textarea {
    /* Restore native webkit behavior */
    @apply placeholder-gray;
  }
}

:root {
  --color-blue-300: #7885ff;
  --color-blue-400: #4d5ffa;
  --color-blue-500: #3d51ff;
  --color-blue-600: #2d42fc;
  --color-blue-700: #2e3dcd;
  --color-cold-blue-500: #3a3f79;
  --color-cold-blue-700: #3a3f798f;
  --color-cold-blue-900: #1e203e;
  --color-slate-100: #a0a3c4;
  --color-slate-500: #3e4361;
  --color-slate-600: #373c58;
  --color-slate-700: #23263b;
  --color-slate-800: #16182e;
  --color-slate-900: #101124;
  --color-slate-950: #08091b;
  --color-gray-50: rgba(255, 255, 255, 0.95);
  --color-gray-100: rgba(255, 255, 255, 0.9);
  --color-gray-200: rgba(255, 255, 255, 0.8);
  --color-gray-300: rgba(255, 255, 255, 0.7);
  --color-gray-400: rgba(255, 255, 255, 0.6);
  --color-gray-500: rgba(255, 255, 255, 0.5);
  --color-gray-600: rgba(255, 255, 255, 0.4);
  --color-gray-700: rgba(255, 255, 255, 0.3);
  --color-gray-800: rgba(255, 255, 255, 0.2);
  --color-gray-900: rgba(255, 255, 255, 0.1);
  --color-gray-950: rgba(255, 255, 255, 0.05);
  --color-yellow-500: #f3b50c;
  --color-red-400: #ff637a;
  --color-red-500: #ff506a;
  --color-green-300: #56dba8;
  --color-green-500: #0ecc83;
  --color-white: #ffffff;
  --color-black: #000000;
}
